<template>
	<div>
		<el-tag class="tag" :key="key" v-for="(item,key) in options" closable size="middle" :disable-transitions="false"
			@close="handleClose(key)">{{ item[tag]}}</el-tag>
		<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
			@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
		<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
	</div>
</template>


<script>
	export default {
		props: {
			options: Array,
			tag: String,
		},
		data() {
			return {
				// dynamicTags: ["标签一", "标签二", "标签三"],
				inputVisible: false,
				inputValue: "",
			};
		},
		computed: {
			dynamicTags: {
				get: function() {
					return this.options;
				},
				set: function(e) {
					this.$emit("update:options", e);
				},
			},
		},
		methods: {
			handleClose(key) {
				this.dynamicTags.splice(key, 1);
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick((_) => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					let obj = {};
					obj[this.tag] = inputValue;
					this.dynamicTags.push(obj);
				}
				this.inputVisible = false;
				this.inputValue = "";
			},
		},
	};
</script>
<style scoped>
	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.tag:not(:last-child) {
		margin-right: 8px;
	}
</style>